import { useRef } from "react";
import { View, Swiper, SwiperItem } from "@tarojs/components";
import { Tabs } from "@nutui/nutui-react-taro";

import "./index.scss";

interface ITabProps {
  tabData: API.OptionItem[];
  currentTab: number;
  swipe?: boolean;
  onChangeTab: (value: number) => void;
}

const ITabIndex: React.FC<ITabProps> = (props) => {
  const { tabData, currentTab = 0, onChangeTab, swipe = false } = props;
  const swiperRef = useRef(null);
  return (
    <View className="i_tab">
      <Tabs
        value={currentTab}
        onChange={(index: number) => {
          onChangeTab?.(index);
        }}
      >
        {tabData.map((item: API.OptionItem) => (
          <Tabs.TabPane title={item.label} value={item.value} key={item.value}>
            {!swipe ? item.components : null}
          </Tabs.TabPane>
        ))}
      </Tabs>
      {swipe ? (
        <Swiper
          autoplay={false}
          current={currentTab}
          ref={swiperRef}
          className="swiper_box"
          previousMargin="16px"
          nextMargin="16px"
          onChange={(page) => {
            onChangeTab?.(page.detail.current);
          }}
        >
          {tabData.map((item: API.OptionItem) => (
            <SwiperItem key={item.value}>{item.components}</SwiperItem>
          ))}
        </Swiper>
      ) : null}
    </View>
  );
};

export default ITabIndex;
